<template>
  <div class="get-red-alert">
    <div class="positionR">
      <transition
        name="redPackget"
        enter-active-class="animated zoomIn"
        leave-active-class="animated zoomOut"
      >
        <div
          class="get-red-packeget"
          ref="refRedShow"
          :class="{'get-red-hide':isHideRed}"
          v-if="redShow"
        >
          <div class="red-bg-img">
            <span
              class="iconfont icon-close"
              @click="closeTemplate"
            ></span>
            <p class="red_title">{{getRedMsg.title}}</p>
            <div class="red-bg-rds"></div>
            <!--红包中间邀请的部分-->
            <div class="person-number-wwrap">
              <div class="person-number-cwrap">
                <!--红包金额-->
                <transition
                  name="moneyShow"
                  v-on:before-enter="getMoneyGot()"
                >
                  <div
                    class="red-money"
                    v-if="getRedMsg.myPacketInfo.showReceivedAmount"
                  >
                    {{money}}元
                  </div>
                </transition>
                <!--助力红包-->
                <template v-if="getRedMsg.redTypeState === 1">
                  <span
                    class="person-number"
                    v-if="getRedMsg.myPacketInfo && getRedMsg.myPacketInfo.packetHelpers && getRedMsg.myPacketInfo.packetHelpers.length > 0"
                  >
                    <span
                      class="user-headers"
                      v-for="(value,key) in getRedMsg.myPacketInfo.packetHelpers"
                      :key="key"
                      v-if="key < 3"
                    >
                      <img
                        class="user-header-list"
                        :src="value.photo"
                        alt=""
                      />
                    </span>
                    <span
                      class="user-headers"
                      v-if="getRedMsg.myPacketInfo.invitedNum < 3"
                      v-for="(value,key) in (3 - Number(getRedMsg.myPacketInfo.invitedNum))"
                    >
                      <img
                        class="user-header-list"
                        :src="staticImageUrl('/images/red_no_join.png')"
                        alt=""
                      />
                    </span>
                    <span class="userheaders-right">已邀约{{getRedMsg.myPacketInfo.invitedNum}}人</span>
                  </span>
                  <span class="person-number">
                    <span
                      class="user-headers"
                      v-for="(value,key) in 3"
                      :key="key"
                      v-if="key < 3"
                    >
                      <img
                        class="user-header-list"
                        :src="staticImageUrl('/images/red_no_join.png')"
                        alt=""
                      />
                    </span>
                    <span class="userheaders-right">待邀约{{getRedMsg.myPacketInfo.waitInvitedNum}}人</span>
                  </span>
                </template>
                <!--开启红包团查看红包团-->
                <!--成长红包-->
                <template v-else-if="getRedMsg.redTypeState === 2">
                  <template>
                    <span class="person-only-one">
                      <span class="userheaders-one-line">
                        <img
                          class="user-header-list"
                          :src="staticImageUrl('/images/red_no_join.png')"
                          alt=""
                        />
                      </span>
                      <span class="userheaders-bottom-text">??元</span>
                    </span>
                  </template>
                  <template v-if="getRedMsg.myPacketInfo && getRedMsg.myPacketInfo.packetHelpers && getRedMsg.myPacketInfo.packetHelpers.length > 0">
                    <span
                      class="person-only-one"
                      v-for="value in getRedMsg.myPacketInfo.packetHelpers"
                    >
                      <span class="userheaders-one-line">
                        <img
                          class="user-header-list"
                          :src="value.photo"
                          alt=""
                        />
                      </span>
                      <span class="userheaders-bottom-text">{{value.amount}}元</span>
                    </span>
                  </template>
                </template>
              </div>
            </div>
            <!--助力和成长红包-->
            <div
              class="displayFlex"
              v-if="getRedMsg.redTypeState === 1 || getRedMsg.redTypeState === 2"
            >
              <div class="displayFlex flex1 flexCenter flexWrap">
                <img
                  @click="$emit('sharePage')"
                  class="red-wx-icon"
                  src="../../../assets/images/amusing/wx_icon.png"
                  alt=""
                >
                <p class="width-full red-wx-icon-des">微信好友</p>
              </div>
              <div class="displayFlex flex1 flexCenter flexWrap">
                <img
                  @click="$emit('sharePage')"
                  class="red-wx-icon"
                  src="../../../assets/images/amusing/wx_frends_icon.png"
                  alt=""
                >
                <p class="width-full red-wx-icon-des">朋友圈</p>
              </div>
            </div>
            <!--进度条，改版之后不需要-->
            <!--<div class="arrive-point" v-if="false">-->
            <!--&lt;!&ndash;<div class="arrive-point" v-if="getRedMsg.redTypeState === 1 || getRedMsg.redTypeState === 2">&ndash;&gt;-->
            <!--<span class="red-wcricle">-->
            <!--<span class="red-cricle"></span>-->
            <!--<span class="red-cricle-text" v-html="getRedMsg.rule[0]"></span>-->
            <!--</span>-->
            <!--&lt;!&ndash;有可领金额或者已经金额大于0&ndash;&gt;-->
            <!--<span class="red-wline">-->
            <!--<span class="red-line" v-if="getRedMsg.myPacketInfo && (getRedMsg.myPacketInfo.receivedAmount > 0 || getRedMsg.myPacketInfo.canReceiveAmount > 0)"></span>-->
            <!--</span>-->
            <!--<span class="red-wcricle">-->
            <!--<span class="red-cricle" v-if="getRedMsg.myPacketInfo && (getRedMsg.myPacketInfo.receivedAmount > 0 || getRedMsg.myPacketInfo.canReceiveAmount > 0)"></span>-->
            <!--<span class="red-cricle-text" v-html="getRedMsg.rule[1]"></span>-->
            <!--</span>-->
            <!--<span class="red-wline">-->
            <!--<span class="red-line" v-if="getRedMsg.myPacketInfo && getRedMsg.myPacketInfo.receivedAmount > 0"></span>-->
            <!--</span>-->
            <!--<span class="red-wcricle">-->
            <!--<span class="red-cricle" v-if="getRedMsg.myPacketInfo && getRedMsg.myPacketInfo.receivedAmount > 0"></span>-->
            <!--<span class="red-cricle-text" v-html="getRedMsg.rule[2]"></span>-->
            <!--</span>-->
            <!--</div>-->
            <!--ui-->
            <div class="red-wradius">
              <div class="red-radius"></div>
            </div>
          </div>
          <div class="red-bottom-part">
            <div
              class="red-big-btn"
              :class="{'disabled':!getRedMsg.myPacketInfo.canReceive,'active':getBtnActive}"
              @click="openRedPage({welPacketId:getRedMsg.myPacketInfo.welPacketId,welPacketType:getRedMsg.redTypeState})"
            >
              <p class="bigFont">领</p>
              <span v-if="goldIcon">
                <img
                  v-for="(value,key) in 3"
                  ref="goldIcon"
                  class="gold-icon"
                  :class="{'active':goldIconActive[key].isShow}"
                  src="../../../assets/images/amusing/gold_icon.png"
                  alt=""
                />
              </span>
            </div>
            <div
              class="red-wclock"
              v-if="getRedMsg.redTypeState === 1 && getRedMsg.myPacketInfo && getRedMsg.myPacketInfo.lastTimeMillis > 0"
            >
              <img
                class="red-clock"
                :src="staticImageUrl('/images/red_clock.png')"
                alt=""
              >
              <span>{{surplusTime.day}}:{{surplusTime.hour1}}:{{surplusTime.minute}}</span>
            </div>
            <!--有已领取金额且没有到红包的最大值-->
            <!--<div class="red-wget-money" v-if="getRedMsg.myPacketInfo && getRedMsg.myPacketInfo.receivedAmount > 0 && !getRedMsg.myPacketInfo.completeReceived">-->
            <!--<a  @click="toHaoKanHaoWan()" href="javascript:;"  class="red-get-money-text">-->
            <!--提现{{getRedMsg.myPacketInfo.receivedAmount}}元-->
            <!--<span class="iconfont icon-arrows_right"></span>-->
            <!--</a>-->
            <!--</div>-->
          </div>
        </div>
      </transition>
      <!--这一块是以前的h5的一个需求，从上往下掉的-->
      <!--<transition-->
      <!--name="redGetMoney"-->
      <!--enter-active-class="animated bounceInDown"-->
      <!--v-on:after-enter="getMoneyGot">-->
      <!--<div class="red-show-wget-money" v-if="isHideRed">-->
      <!--<div class="red-show-cget-money">-->
      <!--<div class="red-get-wmoney">-->
      <!--<span class="red-show-money positionR"><span class="money-icon">￥</span>{{money}}</span>-->
      <!--</div>-->
      <!--<img class="red-get-money-img" :src="staticImageUrl('/images/red_alert_pagcket.png')" alt="" />-->
      <!--<img ref="redBgLight" class="red-bg-light" :src="staticImageUrl('/images/red_light.png')" alt="">-->
      <!--<p class="red-app-des">进好看好玩APP可提现</p>-->
      <!--<a  @click="toHaoKanHaoWan()" href="javascript:;"  class="red-cash-btn">立即提现</a>-->
      <!--</div>-->
      <!--</div>-->
      <!--</transition>-->
      <v-bord v-if="showBord">
        <div
          @click="clickBord"
          slot="cantClick"
          class="com_black"
        ></div>
      </v-bord>
    </div>
  </div>
</template>

<script>
export default {
  name: "GetRedAlert",
  props: {
    getRedProps: Object
  },
  data() {
    return {
      redShow: false,
      isHideRed: false,
      openRedShow: false,
      showBord: true,
      money: 0,
      surplusTimer: "",
      surplusTime: "",
      getBtnActive: false,
      goldIcon: false,
      goldIconActive: [{ isShow: false }, { isShow: false }, { isShow: false }],
      getRedMsg: {
        notNeedAction: false,
        title: "恭喜发财，大吉大利",
        redTypeState: 1, //红包种类//0、普通红包，1、加速红包，2、增长红包
        rule: [], //红包领取规则
        myPacketInfo: {
          receivedAmount: 0, //已领金额
          welPacketId: 0, //红包ID
          completeReceived: false, //
          showReceivedAmount: false, //是否显示已领金额
          canReceive: false, //是否领取按钮可点击
          canReceiveAmount: 0, //可领金额（普通红包不显示）
          lastTimeMillis: 0, //剩余时间毫秒数（助力红包才有用）
          invitedNum: 0, //已经邀约人数
          waitInvitedNum: 0, //待邀请人数（助力红包才有用）
          packetHelpers: [
            {
              userId: "", //帮助者用户id
              photo: "", //帮助者头像
              amount: "" //帮助者账号
            }
          ]
        }
      }
    };
  },
  created() {
    this.getRedMsg = Object.assign({}, this.getRedMsg, this.getRedProps);
  },
  mounted() {
    this.$store.state.loadingImg = false;
    this.redShow = true;
    this.showBord = true;
    if (this.getRedMsg.redTypeState === 1) {
      this.surplusTimerFn();
    }
    /*获取金额的出现*/
    if (this.redShow && this.getRedMsg.myPacketInfo.receivedAmount > 0) {
      this.getMoneyGot();
    }
  },
  methods: {
    /*点击领取红包*/
    getRedPage() {
      this.isHideRed = true;
      this.redShow = false;
    },
    surplusTimerFn() {
      if (
        this.getRedMsg.myPacketInfo &&
        this.getRedMsg.myPacketInfo.lastTimeMillis > 0
      ) {
        this.surplusTime = this.timeCountDown(
          this.getRedMsg.myPacketInfo.lastTimeMillis
        );
        this.surplusTimer = setInterval(() => {
          this.getRedMsg.myPacketInfo.lastTimeMillis -= 10000;
          this.surplusTime = this.timeCountDown(
            this.getRedMsg.myPacketInfo.lastTimeMillis
          );
          if (this.getRedMsg.myPacketInfo.lastTimeMillis <= 0) {
            this.surplusTime = this.timeCountDown(0);
            clearInterval(this.surplusTimer);
          }
        }, 10000);
      }
    },
    /*点击开红包*/
    openRedPage(obj) {
      if (!this.userId) {
        this.$router.push("/to/login");
        return;
      }
      let that = this;
      this.getBtnActive = true;
      this.$emit("openRedPage", obj, callback);
      function callback() {
        setTimeout(() => {
          if (!that.getRedMsg.notNeedAction) {
            that.goldIcon = true;
            that.isHideRed = true;
            for (let value in that.goldIconActive) {
              setTimeout(() => {
                that.goldIconActive[value].isShow = true;
                setTimeout(() => {
                  if (that.$refs.goldIcon[value]) {
                    that.$refs.goldIcon[value].style.left = "1.8rem";
                    that.$refs.goldIcon[value].style.bottom = "-1.3rem";
                    that.$refs.goldIcon[value].style.webkitTransform =
                      "scale(.1)";
                    that.$refs.goldIcon[value].style.transform = "scale(.1)";
                    that.getBtnActive = false;
                  }
                }, 10);
              }, 300 * value);
              setTimeout(() => {
                that.goldIcon = false;
              }, 1500);
            }
          } else {
            that.getBtnActive = false;
          }
        }, 1500);
      }
    },
    /*金额上涨的方法*/
    getMoneyGot(isFirst = false) {
      this.money = 0;
      let that = this;
      let addTimer = 0;
      let addPriceStep = 0.1;
      if (this.getRedMsg.myPacketInfo.receivedAmount > 10000) {
        addPriceStep = 400;
        addTimer = 1;
      } else if (this.getRedMsg.myPacketInfo.receivedAmount > 1000) {
        addPriceStep = 40;
        addTimer = 1;
      } else if (this.getRedMsg.myPacketInfo.receivedAmount > 100) {
        addPriceStep = 4;
        addTimer = 1;
      } else if (this.getRedMsg.myPacketInfo.receivedAmount > 10) {
        addPriceStep = 0.4;
        addTimer = 3;
      } else {
        addPriceStep = 0.05;
        addTimer = 3;
      }
      let timer = setInterval(() => {
        if (
          Number(that.money) <
          Number(that.getRedMsg.myPacketInfo.receivedAmount)
        ) {
          that.money = that.accAdd(that.money, addPriceStep);
        } else {
          that.money = that.getRedMsg.myPacketInfo.receivedAmount;
          if (isFirst) {
            setTimeout(() => {
              that.redShow = false;
              that.showBord = false;
            }, 1500);
          }
          clearInterval(timer);
        }
      }, addTimer);
      /*以前的一个需求*/
      // setTimeout(()=>{
      //     let classStyleName = this.$refs.redBgLight.getAttribute("class");
      //     this.$refs.redBgLight.setAttribute("class",classStyleName+" rotate");
      // },100)
    },
    closeTemplate() {
      this.redShow = false;
      this.showBord = false;
      setTimeout(() => {
        this.$emit("showRedAlert", false);
      }, 200);
    },
    clickBord() {
      if (this.isHideRed) {
        this.isHideRed = false;
        this.redShow = true;
      }
    }
  },
  beforeDestroy() {
    if (this.surplusTimer) {
      clearInterval(this.surplusTimer);
    }
  },
  components: {
    "v-bord": () => import("../../../components/commonComponents/alert/Bord")
  },
  watch: {
    getRedProps: function(val) {
      this.getRedMsg = Object.assign({}, this.getRedMsg, val);
    }
  }
};
</script>

<style scoped lang="scss">
.get-red-alert {
  top: 0%;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  margin: auto;
  position: absolute;
}
.get-red-packeget {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 3.4rem;
  height: 5.4rem;
  z-index: 1060;
  -webkit-border-radius: 0.07rem;
  -moz-border-radius: 0.07rem;
  border-radius: 0.07rem;
  background-color: #de4d46;
}
.red-bg-img {
  padding-top: 0.4rem;
  background-color: #e95149;
  height: 4.2rem;
  position: relative;
  border-top-left-radius: 0.07rem;
  border-top-right-radius: 0.07rem;
}
.red_title {
  font-size: 0.25rem;
  color: #f1e89c;
  text-align: center;
}
.person-number-cwrap {
  display: -webkit-flex;
  display: flex;
  position: relative;
  height: 2.2rem;
  padding-top: 1.32rem;
  width: 100%;
  overflow: auto;
  -webkit-justify-content: center;
  justify-content: center;
}
.person-number-wwrap {
  overflow: hidden;
  width: 100%;
  height: 2.1rem;
}
.person-number {
  position: relative;
  padding-left: 0.25rem;
  height: 0.22rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-flex: 1;
  flex: 1;
  padding-right: 0.15rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: nowrap;
}
.arrive-point {
  width: 2.17rem;
  position: relative;
  left: 0;
  right: 0;
  margin: auto;
}
.arrive-point {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.red-wcricle {
  display: inline-block;
  width: 0.1rem;
  height: 0.1rem;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #d94b43;
  position: relative;
  .red-cricle {
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width: 0.06rem;
    height: 0.06rem;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #ffe100;
    z-index: 2;
  }
}
.red-money {
  position: absolute;
  top: 0.3rem;
  left: 0;
  color: #f2e991;
  font-size: 0.34rem;
  width: 100%;
  text-align: center;
}
.red-wline {
  display: inline-block;
  width: 50%;
  height: 0.05rem;
  background-color: #d94b43;
  position: relative;
  margin: 0 -0.03rem;
  .red-line {
    height: 0.02rem;
    background-color: #ffe100;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
  }
}
.user-header-list {
  width: 0.22rem;
  height: 0.22rem;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.user-headers {
  width: 0.15rem;
  display: inline-block;
}
.userheaders-right {
  padding-left: 0.13rem;
  font-size: 0.11rem;
  color: #fff;
  white-space: nowrap;
  position: relative;
  top: -6px;
}
.userheaders-bottom-text {
  font-size: 0.11rem;
  color: #fff;
}
.person-only-one {
  text-align: center;
  min-width: 20%;
}
.userheaders-one-line {
  display: block;
  text-align: center;
}
.red-cricle-text {
  position: absolute;
  top: 0.15rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
  font-size: 0.12rem;
  width: 1rem;
}
.red-wradius {
  position: absolute;
  height: 0.5rem;
  left: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  background-color: #de4d46;
  margin-top: 0.75rem;
}
.red-radius {
  position: absolute;
  left: 0;
  top: -0.45rem;
  width: 100%;
  height: 0.9rem;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #e95149;
  -webkit-box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.2);
}
.red-bottom-part {
  height: 1.1rem;
  position: absolute;
  bottom: 0.7rem;
  left: 50%;
  transform: translateX(-50%);
}
.red-big-btn {
  width: 1rem;
  height: 1rem;
  background-color: #ebde76;
  -webkit-box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  color: #dd564f;
  left: 0;
  right: 0;
  margin: auto;
  position: relative;
}
.red-big-btn.disabled {
  background-color: #ebdf75;
  color: #d9ce6c;
}
.red-big-btn.active {
  -webkit-animation: activeBtn 1.5s infinite;
  -o-animation: activeBtn 1.5s infinite;
  animation: activeBtn 1.5s infinite;
}
@keyframes activeBtn {
  0% {
    -webkit-transform: rotate3d(0, 180, 0, 0deg);
    transform: rotate3d(0, 180, 0, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 180, 0, 360deg);
    transform: rotate3d(0, 180, 0, 360deg);
  }
}
.red-big-cbtn {
  text-align: center;
  font-size: 0.15rem;
}
.red-wclock {
  color: #fff;
  font-size: 0.13rem;
  text-align: center;
  padding-top: 0.2rem;
  letter-spacing: 1px;
  .red-clock {
    width: 0.12rem;
    position: relative;
    top: 1px;
  }
}
.bigFont {
  font-size: 0.45rem;
}
.red-show-wget-money {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 2.66rem;
  height: 2.28rem;
  z-index: 1050;
  .red-show-cget-money {
    position: relative;
  }
  .red-get-wmoney {
    position: absolute;
    top: 0.59rem;
    text-align: center;
    width: 100%;
    font-size: 0.36rem;
    color: #d94545;
    z-index: 3;
    .money-icon {
      font-size: 0.24rem;
      position: absolute;
      left: -0.25rem;
      bottom: 0;
    }
  }
  .red-get-money-img {
    width: 2.66rem;
    position: relative;
    z-index: 2;
  }
  .red-app-des {
    font-size: 0.15rem;
    color: #fff;
    position: absolute;
    bottom: 0.23rem;
    width: 100%;
    text-align: center;
    z-index: 3;
  }
  .red-cash-btn {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -1rem;
    z-index: 3;
    background-color: #e74a4a;
    font-size: 0.17rem;
    border-radius: 0.25rem;
    height: 0.5rem;
    line-height: 0.5rem;
    width: 2rem;
    text-align: center;
    color: #fff;
    letter-spacing: 0.02rem;
  }
  .red-bg-light {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: auto;
    width: 130%;
  }
  .red-bg-light.rotate {
    -webkit-animation: lightRotate 5s infinite linear;
    -o-animation: lightRotate 5s infinite linear;
    animation: lightRotate 5s infinite linear;
  }
}
.red-get-money-text {
  display: inline-block;
  width: 1.3rem;
  height: 0.32rem;
  line-height: 0.32rem;
  font-size: 0.14rem;
  color: #fff;
  border: 1px solid #fff;
  text-align: center;
  .icon-arrows_right {
    font-size: 0.08rem;
    color: #fff;
    width: 0.08rem;
  }
}
@keyframes lightRotate {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    -moz-transform: translate(-50%, -50%) rotate(0deg);
    -ms-transform: translate(-50%, -50%) rotate(0deg);
    -o-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
    -moz-transform: translate(-50%, -50%) rotate(360deg);
    -ms-transform: translate(-50%, -50%) rotate(360deg);
    -o-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.animated.zoomIn,
.animated.zoomOut {
  -webkit-animation-duration: 300ms;
  animation-duration: 300ms; // 动画执行时间
}

/*.get-red-hide{*/
/*display: none;*/
/*}*/
.icon-close {
  color: #f0e89c;
  font-size: 0.16rem;
  position: absolute;
  right: 0.1rem;
  top: 0.1rem;
  opacity: 0.7;
  display: inline-block;
  min-height: 0.32rem;
  min-width: 0.26rem;
}
.red-wget-money {
  margin-top: 0.25rem;
}
.gold-icon {
  width: 0.3rem;
  height: 0.3rem;
  position: absolute;
  left: 1.05rem;
  bottom: 0;
  margin: auto;
}
.gold-icon.active {
  /*-webkit-animation: goldIconActive .5s;*/
  /*-o-animation: goldIconActive .5s;*/
  /*animation: goldIconActive .5s linear;*/
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.red-wx-icon-des {
  color: #fff;
  text-align: center;
  font-size: 0.12rem;
  line-height: 0.3rem;
}
.red-wx-icon {
  width: 0.41rem;
}
/* @keyframes goldIconActive {
        0%{
            left: 1.05rem;
            bottom: 0;
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
        }
        100%{
            left: 3.05rem;
            bottom: -3rem;
            display: none;
            -webkit-transform: scale(.1);
            -moz-transform: scale(.1);
            -ms-transform: scale(.1);
            -o-transform: scale(.1);
            transform: scale(.1);
        }
    }*/
</style>
